<template>
  <div style="padding: 0 2px">
    <a-date-picker v-if="auth === 'edit'" show-time
                   :placeholder="fieldConfig.placeholder" :format="format"
                   style="width: 100%" :locale="locale" v-model="innerValue" />
    <span v-else-if="auth === 'browse'">{{innerValueText}}</span>
  </div>
</template>
<script>
import moment from 'moment'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import { createProps } from '@/utils'

export default {
  name: 'DateInput',
  props: {
    auth: createProps(String, 'edit'),
    value: createProps(String),
    fieldConfig: createProps(Object)
  },
  data() {
    return {
      locale
    }
  },
  methods: {
    change(v) {
      this.$emit('change', v)
      this.$emit('update:value', v)
      this.$emit('update:title', v)
      this.$emit('update', v)
    }
  },
  computed: {
    format() {
      return this.fieldConfig && this.fieldConfig.format || 'YYYY-MM-DD HH:mm:ss'
    },
    innerValueText() {
      let res = this.innerValue
      return res && res.format(this.format) || undefined
    },
    innerValue: {
      get() {
        if (!this.value) return undefined
        return moment(this.value, 'YYYY-MM-DD HH:mm:ss')
      },
      set(v) {
        this.change(this.fieldConfig.format && v && v.format('YYYY-MM-DD HH:mm:ss') || undefined);
      }
    }
  }
}
</script>